<template>
	<view class="travel-card" :class="[type]" @click="handleClick">
		<!-- 封面图片 -->
		<image class="card-cover" :src="this.url" mode="aspectFill" v-if="cover"></image>

		<!-- 内容区域 -->
		<view class="card-content">
			<!-- 标题区域 -->
			<view class="card-header">
				<text class="title">{{ name }}</text>
				<text v-if="description" class="subtitle">{{ truncatedDescription }}</text>
			</view>

			<!-- 标签区域 -->
			<view v-if="tags && tags.length" class="tag-container">
				<text v-for="(tag, index) in tags" :key="index" class="tag">{{ tag }}</text>
			</view>

			<!-- 评分区域 -->
			<!-- tags的不同标签展示不同的内容 -->
			<view  class="rating-container" v-if = "tags && tags[1] == '高评价'">
				<text class="reviews" v-if="averageRating">{{ averageRating }}分 · {{ reviewCount }}条评论</text>
				<text class="reviews" v-if="ticketPrice">票价: ¥{{ ticketPrice }}</text>
				<text class="reviews" v-else="ticketPrice">免费</text>
			</view>
			<view  class="rating-container" v-else-if="tags && tags[1] == '推荐'">
				<text class="reviews" v-if="averageRating">{{ averageRating }}分 · {{ collectionCount }}个收藏</text>
				<text class="reviews" v-if="ticketPrice">票价: ¥{{ ticketPrice }}</text>
				<text class="reviews" v-else="ticketPrice">免费</text>
			</view>
			<view  class="rating-container" v-else-if="tags && tags[1] == '浏览'">
				<text class="reviews" v-if="averageRating">{{ averageRating }}分 · {{ viewCount }}浏览量</text>
				<text class="reviews" v-if="ticketPrice">票价:¥{{ ticketPrice }}</text>
				<text class="reviews" v-else="ticketPrice">免费</text>
			</view>
			<view  class="rating-container" v-else>
				<text class="reviews" v-if="averageRating">{{ averageRating }}分 · {{ reviewCount }}条评论</text>
				<text class="reviews" v-if="ticketPrice">票价: ¥{{ ticketPrice }}</text>
				<text class="reviews" v-else="ticketPrice">免费</text>
			</view>

			<!-- 底部信息 -->
			<view v-if="openTime" class="card-footer">
				<text class="footer-text">{{ openTime }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import base from "/axios/base.js";
	export default {
		props: {
			attractionId: {//景点id
				type: Number,
				required: true
			}, 
			name: {//景点名称
				type: String,
				required: true
			},
			description:{//景点描述
				type: String,
				default: ''
			},
			coverImage: {//景点封面图片
				type: String,
				default: 'http://localhost:8090/files/1743126483263_6f51bf88862952b4b7730468a8fab727.jpg'
			},
			averageRating: {//评论均分
				type: Number,
				required: true
			}, 
			collectionCount: {//收藏次数
				type: Number,
				required: true
			}, 
			createdAt:{//创建时间
				type: String,
				default: ''
			},
			detailImages: {//详情图片
				type: String,
				default: 'http://localhost:8090/files/1743126483263_6f51bf88862952b4b7730468a8fab727.jpg'
			},
			latitude: {
				type: Number,
				required: true
			}, 
			longitude: {//经纬度
				type: Number,
				required: true
			}, 
			openTime: {//开放时间
				type: String,
				default: ''
			},
			reviewCount: {//评论次数
				type: Number,
				required: true
			},
			ticketPrice: {//门票价格
				type: Number,
				required: true
			},
			updatedAt: {//更新时间
				type: String,
				default: ''
			},
			viewCount: {//浏览次数
				type: Number,
				required: true
			},
			
			cover: {
				type: String,
				default: 'http://localhost:8090/files/1743126483263_6f51bf88862952b4b7730468a8fab727.jpg'
			},
			tags: {
				type: Array,
				default: () => []
			},
			footer: {
				type: String,
				default: ''
			},
			rating: {
				type: Number,
				default: 0
			},
			reviews: {
				type: Number,
				default: 0
			},
			type: {
				type: String,
				default: 'normal',
				validator: (value) => {
					return ['normal', 'hotel', 'expense', 'question', 'experience', 'hotel-rating', 'ranking']
						.includes(value);
				},
			}

			// item: {
			// 	type: Object,
			// 	required: true
			// }

		},
		  computed: {
		    truncatedDescription() {
		      return this.description.length > 22? this.description.substring(0, 22) + '...' : this.description;
		    }
		  },
		data() {
			return {
				attractionItem: {},
				url:'',
			}
		},
		create() {
		},
		beforeMount() {
			// console.log("Before Mount:", this.coverImage);
			this.url = base.url + this.coverImage;
			// console.log("拼接后的url", this.url);
			// 在组件挂载之前访问 item
		},
		mounted() {
			// console.log("Mounted:", this.coverImage);
			// 在组件挂载后访问 item
			// 可以在这里进行 DOM 操作或发起网络请求
		},
		methods: {
			handleClick() {
				this.$emit('click');
			}
		}
	}
</script>

<style lang="scss">
	.travel-card {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

		.card-cover {
			width: 100%;
			height: 200rpx;
			display: block;
		}

		.card-content {
			padding: 20rpx;

			.card-header {
				margin-bottom: 12rpx;

				.title {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					display: block;
					margin-bottom: 6rpx;
					line-height: 1.4;
				}

				.subtitle {
					font-size: 24rpx;
					color: #666;
					display: block;
					line-height: 1.4;
				}
			}

			.tag-container {
				margin: 12rpx 0;

				.tag {
					display: inline-block;
					padding: 4rpx 12rpx;
					background-color: #f0f7ff;
					border-radius: 6rpx;
					font-size: 22rpx;
					color: #1890ff;
					margin-right: 8rpx;
					margin-bottom: 8rpx;
				}
			}

			.rating-container {
				display: flex;
				align-items: center;
				margin: 12rpx 0;

				.reviews {
					font-size: 22rpx;
					color: #999;
					margin-left: 8rpx;
				}
			}

			.card-footer {
				border-top: 1rpx solid #f0f0f0;
				padding-top: 12rpx;
				margin-top: 12rpx;

				.footer-text {
					font-size: 22rpx;
					color: #999;
				}
			}
		}

		// 不同类型卡片样式
		&.hotel {
			border-top: 6rpx solid #4cd964;
		}

		&.expense {
			border-top: 6rpx solid #ff5a5f;
		}

		&.question {
			border-top: 6rpx solid #007aff;
		}

		&.experience {
			border-top: 6rpx solid #ff9500;
		}

		&.hotel-rating {
			border-top: 6rpx solid #5856d6;
		}

		&.ranking {
			border-top: 6rpx solid #ff2d55;
		}
	}
</style>